<template>
  <div class="view pa24">
    <el-row :gutter="24">
      <el-col :xl="24" :lg="16" class="d-flex justify-content-between">
        <div class="d-flex align-items-center">
          <el-input
             v-model="searchKey"
             class="mb10"
             style="width: 240px"
             placeholder="请输入员工姓名或者电话号码"
          />
          <el-button class="ml10 mb10" type="primary" @click="search">搜索</el-button>
          <!-- <el-button class="ml10 mb10">导出</el-button> -->
        </div>
        <!-- <div class="d-flex align-items-center">
          <el-button type="primary" class="mb10" @click="sectorSetup">部门设置</el-button>
          <el-button type="primary" class="mb10" @click="AdministratorList">管理员列表</el-button>
        </div> -->
      </el-col>
      
    </el-row>
    <commonTable :tableData="tableData" 
                 @handleSizeChange="handleSizeChange"
                 @handleCurrentChange="handleCurrentChange"
                 :currentPage="currentPage"
                 :loading="loading"
                 :total="total">
      <template v-slot:table>
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column prop="cardId" width="100px" align="center" label="工号" />
        <el-table-column prop="name" align="center" label="姓名" />
        <el-table-column
          prop="position"
          align="center"
          label="职位"
          show-overflow-tooltip
        />
        <!-- <el-table-column prop="department" align="center" label="部门" /> -->
        <el-table-column prop="personalWx" align="center" label="微信号" />
        <el-table-column prop="phone" align="center" label="手机" />
        <el-table-column prop="character" width="100px" align="center" label="角色" />
        <el-table-column prop="createTime" align="center" label="创建时间" />
        <el-table-column prop="num" align="center" label="独占客户数" />
        <el-table-column prop="dealNum" align="center" label="成单客户数" />
        <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <!-- <el-button type="text" @click="edit_tap(scope.row.cardId)">编辑</el-button> -->
              <el-button type="text" @click="detall_tap(scope.row.cardId)">详情</el-button>
            </template>
            <!-- <el-button type="text" style="color: #4484fd">编辑</el-button> -->
        </el-table-column>
      </template>
    </commonTable>
    <el-dialog
      title="编辑成员"
      center
      :visible.sync="dialogVisible"
      :modal-append-to-body="false"
      width="25%"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="auto"
        class="ruleForm d-flex flex-column align-items-center"
      >
        <el-form-item label="工号" prop="jobNumber">
          <el-input
            style="width: 240px"
            v-model="ruleForm.jobNumber"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input style="width: 240px" v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="职位" prop="position">
          <el-input style="width: 240px" v-model="ruleForm.position"></el-input>
        </el-form-item>
        <el-form-item label="微信号" prop="weChatNumber">
          <el-input
            style="width: 240px"
            v-model="ruleForm.weChatNumber"
          ></el-input>
        </el-form-item>
        <el-form-item label="名片展示手机号">
          <el-input
            @input="change"
            type="number"
            maxlength="11"
            readonly 
            style="width: 240px"
            v-model="ruleForm.phone"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-select
            v-model="ruleForm.departmentValue"
            style="width: 240px"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in departmentOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设置成员角色" prop="memberRole">
          <div style="width: 240px">
            <el-radio v-model="ruleForm.memberRole" label="1"
              >普通成员</el-radio
            >
            <el-radio v-model="ruleForm.memberRole" label="2">管理员</el-radio>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import commonTable from "@/components/common/commonTable";
import { fetchCorporator } from "@/api/companyManage.js";
import { getDataTimeSec } from "@/utils/index";
export default {
  name: "enterpriseMember",
  components: {
    commonTable,
  },
  data() {
    return {
      tableData: [],
      departmentOptions: [{ value: "1", lable: "普通成员" }],
      dialogVisible: false,
      ruleForm: {
        jobNumber: "",
        name: "",
        position: "",
        weChatNumber: "",
        phone: "",
        departmentValue: "",
        memberRole: "1",
      },
      rules: {
        jobNumber: [{ required: true, message: "请输入工号", trigger: "blur" }],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        position: [{ required: true, message: "请输入职位", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入展示手机号", trigger: "blur" },
          { max: 11, message: "手机号格式不正确", trigger: "blur" },
        ],
        department: [
          { required: true, message: "请选择部门", trigger: "blur" },
        ],
        
      },
      total: 0, //总条数
      currentPage: 1, //当前页数
      queryDate: "",
      pageNum: 1,
      pageSize: 10,
      loading: false, //加载中
      searchKey:'' //关键字
    };
  },
  filters: {
    dateFilter(val) {
      console.log(val);
    },
  },
  mounted() {
    this.getCorporator();
  },
  methods: {
    change() {
      if (this.ruleForm.phone.length > 11) {
        this.ruleForm.phone = this.ruleForm.phone.slice(0, 11);
      }
    },
    //获取企业成员
    getCorporator() {
      let data = {
        pageNum:this.pageNum,
        pageSize:this.pageSize,
        name:this.searchKey
      }
      fetchCorporator(data)
        .then((res) => {
          this.loading = false;
          this.tableData = res.data.list;
          this.total = res.data.totalNumber
          this.tableData.forEach((v) => {
            v.createTime = getDataTimeSec(v.createTime);
            if (v.roleId == 1) {
              v.character = "管理员";
            } else {
              v.character = "普通员工";
            }
          });
        })
        .catch((err) => {
          this.tableData = []
          this.loading = false;
          console.log(err);
        });
    },
    //当前页变更
    handleCurrentChange(num) {
      this.pageNum = num;
      this.loading = true;
      this.getCorporator();
    },
    //当前页查询数据条数变更
    handleSizeChange(num) {
      this.pageSize = num;
      this.pageNum = 1;
      this.currentPage = 1;
      this.loading = true;
      this.getCorporator();
    },
    search(){
      this.getCorporator()
    },
    detall_tap(id){
      this.$router.push('./memberDetall?id=' + id)
    },
    edit_tap(id){
      this.dialogVisible = true
    },
    sectorSetup(){
      this.$router.push('/sectorSetup')
    },
    AdministratorList(){
      this.$router.push('/AdministratorList')
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/ input[type="number"] {
  -moz-appearance: textfield !important;
}
</style>